<template>
    <template v-for="item in props.menus">
        <!-- @contextmenu.prevent.stop="contextMenuClick(item, $event)" -->
        <el-menu-item v-if="!item.children" :index="item.fullPath" @click="clickPath(item)">
            <div class="mr-2 align-item-center">
                <icon-svg class="mr-2" name="dot" />
            </div>
            <template #title><span>{{ item.title }}</span></template>
        </el-menu-item>
        <!-- @contextmenu.prevent.stop="contextMenuClick(item, $event)" -->
        <el-sub-menu v-else :index="item.fullPath">
            <template #title>
                <div class="mr-2 align-item-center">
                    <icon-svg class="mr-10 mb-2" :name="item.icon" />
                </div>
                <span>{{ item.title }}</span>
            </template>
            <template v-for="menu in item.children">
                <SubMenu v-if="menu.children" :menus="[menu]" @context-call="(s, e) => emit('contextCall', s, e)" />
                <!-- @contextmenu.prevent.stop="contextMenuClick(menu, $event)" -->
                <el-menu-item v-else :index="menu.fullPath" @click="clickPath(menu)">
                    <div class="mr-2 align-item-center">
                        <!-- <icon-svg name="dot" /> -->
                    </div>
                    <template #title><span>{{ menu.title }}</span></template>
                </el-menu-item>
            </template>
        </el-sub-menu>
    </template>
</template>
<script setup lang="ts">
import useApp from '@/store/app';
import type { SideMenu } from '@xuekl/cli-base/type';
const props = defineProps(['menus'])
const emit = defineEmits(['contextCall'])
// const { menus } = props
const appStore = useApp()

// const contextMenuClick = (item, e) => {
//     emit('contextCall', item, e)
// }
const clickPath = (menu: SideMenu) => {
    if (menu.fullName !== 'Home') {
        appStore.currentMenu = menu
        appStore.menusHistory.push(menu)
    } else {
        appStore.currentMenu = {}
    }
    menu.meta!.keepAlive = true
    appStore.defaultActive = menu.fullPath || ''

}
</script>
<style lang="scss" scoped></style>